<template>
  <div class="pager">
    <el-pagination background layout="prev, pager, next, total, sizes" :page-sizes="pageSizes" :page-size="limit"
                   :current-page="page" :total="total" @current-change="onCurrentChange" @size-change="onSizeChange" />
  </div>
</template>
<script setup>
const emits = defineEmits(['current-change', 'size-change'])
const props = defineProps(['page', 'total', 'limit', 'pageSizes'])

const onCurrentChange = (val) => {
  emits('current-change', val)
}
const onSizeChange = (val) => {
  emits('size-change', val)
}
</script>

<style>
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.el-pagination .el-select .el-input {
  width: 100px;
}

.el-pager + button.btn-next[type=button] {
  margin-right: 10px;
}
</style>
